<template>
    <div class="contact_container">
        <Banner title='联系我们' flag="contact"></Banner>
        <!-- contact-detail  START -->
        <div class="container contact_detail_container wow animate__animated animate__fadeInUp" data-wow-duration="2s">
            <div class="row">
                <div class="col-lg-4 root">
                    <div class="inside_root">
                        <span class="icon">
                            <img src="./image/phone.png" alt="电话">
                        </span>
                        <h3>联系电话</h3>
                        <p>Tel: 15800616566</p>
                    </div>
                </div>
                <div class="col-lg-4 root">
                    <div class="inside_root">
                        <span class="icon">
                            <img src="./image/addtress.png" alt="地址">
                        </span>
                        <h3>公司地址</h3>
                        <p>上海市闵行区春东路508号IF如果创意产业园A栋7层</p>
                    </div>
                </div>
                <div class="col-lg-4 root">
                    <div class="inside_root">
                        <span class="icon">
                            <img src="./image/email.png" alt="邮箱">
                        </span>
                        <h3>公司邮箱</h3>
                        <p>Mailto: info@zuofeibio.com</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- contact-detail  END -->

        <!-- 表单内容  START -->
        <div class="container-fluild form_container">
            <div class="container form_content wow animate__animated animate__fadeInUp" data-wow-duration="2s">
                <el-form :model="userMsg" :rules="rules" ref="userForm" size="large" label-position="top">
                    <div class="row">
                        <div class="col-lg-6">
                            <el-form-item label="您的姓名" prop="name">
                                <el-input class="input" v-model="userMsg.name" placeholder="请输入您的姓名/昵称"
                                    clearable></el-input>
                            </el-form-item>
                        </div>
                        <div class="col-lg-6">
                            <el-form-item label="联系电话" prop="phone">
                                <el-input class="input" v-model="userMsg.phone" placeholder="请输入您的联系电话" maxlength="11"
                                    clearable></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <el-form-item label="您的公司" prop="company">
                                <el-input class="input" v-model="userMsg.company" placeholder="请输入您的公司名称"
                                    clearable></el-input>
                            </el-form-item>
                        </div>
                        <div class="col-lg-6">
                            <el-form-item label="您的邮箱">
                                <el-input class="input" v-model="userMsg.email" placeholder="请输入您的邮箱"
                                    clearable></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <el-form-item label="留言">
                        <el-input class="input" v-model="userMsg.message" type="textarea" placeholder="请输入"
                            rows="4"></el-input>
                    </el-form-item>
                    <div class="button_container">
                        <el-button class="button" color="#4F68AC" @click="sendUserMsg">提交</el-button>
                    </div>
                </el-form>
            </div>
        </div>
        <!-- 表单内容  END -->
    </div>
</template>

<script setup lang="ts">
    import { onMounted, nextTick, reactive, ref } from 'vue';
    import WOW from 'wow.js'// 在vue3中下载的是wow.js|vue2中是wowjs
    import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';
    import useCommonStore from '@/store/modules/common';

    const commonStore = useCommonStore()

    // 联系电话的验证内容
    const validatePhone = (rule: any, value: any, callback: any) => {
        let reg_tel = /^1[3456789]\d{9}$/
        if (value == '') {
            callback(new Error('请输入您的联系电话'))
            console.log(rule)
        } else {
            if (reg_tel.test(value)) {
                callback()
            } else {
                callback(new Error('请输入正确格式的手机号码'))
            }
        }
    }
    const userMsg = reactive({
        name: "",
        phone: "",
        company: "",
        email: "",
        message: ""
    })
    let userForm = ref()
    const rules = reactive({
        name: [
            { required: true, message: '请输入您的姓名/名称', trigger: 'change' },
        ],
        phone: [
            { required: true, validator: validatePhone, trigger: 'blur' },
        ],
        company: [
            { required: true, message: '请输入您的公司名称', trigger: 'change' },
        ]
    })

    onMounted(() => {
        nextTick(() => {   //页面渲染完，在执行
            new WOW().init()
        })
    });

    const sendUserMsg = async () => {
        await userForm.value.validate()
        let headers = {
            Authorization: "Bearer MsRMxlpkxuerzNepYr1bEqlLePXRx1j1"
        }
        let data = {
            app_id: '63aeaeae85b4df000a396bb7',
            entry_id: '65684555c530a9e20ef5d39c',
            is_start_workflow: true, // 是否推送给老板
            data: {
                name: {
                    value: userMsg.name
                },
                phone: {
                    value: userMsg.phone
                },
                company: {
                    value: userMsg.company
                },
                email: {
                    value: userMsg.email
                },
                message: {
                    value: userMsg.message
                }
            }
        }
        await commonStore.sendUserMsg(data, headers)
        if (commonStore.status) {
            ElMessage.success('提交成功')
        }
        commonStore.status = false
    }
</script>

<style lang="scss">
    .contact_container {
        .contact_detail_container {
            position: relative;

            .root {
                padding: 0px 16px;

                .inside_root {
                    background-color: rgba(255, 255, 255, 0.8);
                    height: 250px;
                    border-radius: 10px;
                    padding: 50px 30px;
                    cursor: pointer;
                    box-shadow:
                        0px 0px 1.4px -15px rgba(0, 0, 0, 0.031),
                        0px 0px 3.5px -15px rgba(0, 0, 0, 0.044),
                        0px 0px 7.1px -15px rgba(0, 0, 0, 0.056),
                        0px 0px 14.6px -15px rgba(0, 0, 0, 0.069),
                        0px 0px 40px -15px rgba(0, 0, 0, 0.2);
                    transition: transform 0.5s ease;
                }

                .icon {
                    width: 50px;
                    height: 50px;
                    display: block;
                    margin: 0 auto;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                h3 {
                    font-family: "Source Han Sans CN";
                    font-size: 16px;
                    color: #999;
                    text-align: center;
                    margin-top: 20px;
                    line-height: 25px;
                }

                p {
                    font-family: "Source Han Sans CN";
                    font-size: 15px;
                    color: #555;
                    text-align: center;
                    margin-top: 5px;
                    line-height: 25px;
                }
            }
        }

        .form_container {
            background-color: #f8f8f8;
            padding-top: 60px;
            padding-bottom: 80px;

            .form_content {
                background-color: #fff;
                border-radius: 10px;
                padding: 60px 50px;

                .input {
                    font-size: 15px;
                    color: #333;
                    font-family: "Source Han Sans CN";
                    height: 50px;
                    margin-bottom: 20px;
                }

                p {
                    font-size: 16px;
                    font-family: "Source Han Sans CN";
                    margin-bottom: 10px;
                    color: #666;
                }

                .red {
                    color: red;
                }

                .button_container {
                    display: flex;
                    justify-content: center;
                    margin-top: 60px;

                    .button {
                        width: 290px;
                        height: 50px;
                        transition-duration: 0.3s;

                        &:active {
                            transform: scale(0.95);
                        }
                    }
                }

                .el-form-item__error {
                    font-size: 14px;
                    margin-top: -16px;
                }
            }
        }
    }

    /* 设置响应式 */
    /* 移动端 */
    @media (max-width: 1200px) {
        .contact_detail_container {
            top: 20px;
            padding-bottom: 120px;
        }

        .inside_root {
            margin-top: 30px;
        }
    }

    /* PC端 */
    @media (min-width: 1200px) {
        .contact_detail_container {
            top: -120px;
        }

        .inside_root:hover {
            transform: translateY(-50px)
        }
    }
</style>